<template>
  <div class="main-app">
    <el-divider content-position="left">转运基本信息</el-divider>
    <el-row style="margin-top: -10px">
      <el-form ref="form" :model="form" label-width="200px">
        <el-col :span="8">
          <el-form-item label="车辆名称:" required>
            <el-select v-model="form.vehicleId" style="width: 100%;" :disabled="isEdits" placeholder="请选择" clearable @change="selectedCar">
              <el-option v-for="item in carList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="车牌号:" style="width: 100%;">
            <el-input v-model="form.vehiclePlateNumber" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车型:" style="width: 100%;">
            <el-input v-model="form.vehicleModel_text" disabled />
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-divider content-position="left">转运基本信息</el-divider>
    <el-row style="margin-top: -10px">
      <el-form ref="form" :model="form" label-width="200px">
        <el-col :span="8">
          <el-form-item label="转运计划编号:">
            <el-input v-model="form.transferPlanNumber" disabled />
          </el-form-item>
          <el-form-item label="产废单位:">
            <el-input v-model="form.wpcName" disabled />
          </el-form-item>

          <el-form-item label="接受单位:">
            <el-input v-model="form.ccName" disabled />
          </el-form-item>
          <el-form-item label="运输单位:">
            <el-input v-model="form.tcName" disabled />
          </el-form-item>
          <el-form-item label="拟定转运时间:">
            <div class="block">
              <el-date-picker v-model="form.transportTime" disabled type="daterange" range-separator="至"
                              start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;" format="yyyy 年 MM 月 dd 日"
              />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">

          <el-form-item label="转运申请编号:">
            <el-input v-model="form.number" disabled />
          </el-form-item>
          <el-form-item label="" disabled style="margin-top: -20px;" />
          <el-form-item label="通讯地址:">
            <el-input v-model="form.wpcAddress" disabled />
          </el-form-item>
          <el-form-item label="通讯地址:" disabled>
            <el-input v-model="form.ccAddress" disabled />
          </el-form-item>
          <el-form-item label="通讯地址:" disabled>
            <el-input v-model="form.tcAddress" disabled />
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-divider content-position="left">拟转移危险类别</el-divider>
    <el-row style="margin-top: -10px; padding: 10px">
      <el-form :inline="true" class="form-inline">
        <el-form-item>
          <el-button icon="el-icon-arrow-left" @click="cancel">
            返 回
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-s-promotion" :disabled="isEdits" @click="destribut">
            派 发
          </el-button>
        </el-form-item>

        <el-form-item>
          <div>拟定转移数量 ：{{ number }}</div>
        </el-form-item>
        <el-form-item>
          <el-divider direction="vertical" />
        </el-form-item>
        <el-form-item>
          <div>拟定转移重量 ：{{ wastWeight }} 吨</div>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-table :data="tableData" border style="margin-top: -10px; width: 100%">
        <el-table-column prop="name" label="废物名称" width="180" />

        <el-table-column prop="categoryContent" label="废物类别" />
        <el-table-column prop="codeId" label="废物代码" />
        <el-table-column prop="characteristicContent" label="危险特性" />
        <el-table-column prop="physicalProperties" label="废物形态">
          <template slot-scope="scope">
            <el-tag size="medium" style="width: 100%; text-align: center;" effect="dark">
              {{ scope.row.physicalProperties |parsePhysicalProperties }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="hazardousSubstancesName" label="危害成分" />
        <!-- <el-table-column prop="containerCategory" label="容器类型">
          <template slot-scope="scope">
            <el-tag size="medium" style="width: 100%; text-align: center;" effect="dark">
              {{ scope.row.containerCategory | parseContainerCategory }}
            </el-tag>
          </template>
        </el-table-column> -->

        <el-table-column prop="wastCount" label="拟定转移数量" width="180" />
        <el-table-column prop="wastWeight" label="拟定转移总重量 (吨)" width="180" />
      </el-table>
      <div class="page">
        <el-pagination background :current-page.sync="currentPage" layout="total,prev, pager, next,sizes" :total="total"
                       :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" @current-change="handleCurrentChange"
                       @size-change="handleCurrentChange"
        />
      </div>
    </el-row>

  </div>
</template>

<script>
// Table组件相关逻辑，需要引用
import {
  pageMixin
} from "../../../mixins/index";
import {
  PhysicalProperties,
  ContainerType,
  CarType
} from "../../../utils/resource.js";
import {
  getTransportApplyInfoById,
  getApplyWastList,
  // getCarsByOrgId,
  destributeTransportApply
} from '../../../api/wastecomponey.js';
import {
  getFloat,
  parseStartAndEndTimeList
} from '../../../utils/index.js';

import { getList } from "../../../api/vehicle";
export default {
  filters: {
    parseDate(value) {
      if (value) {
        return value.replace("T", " ");
      }
    },

    parsePhysicalProperties(value) {
      if (value != null) {
        var obj = PhysicalProperties.find((p) => p.value === `${value}`);
        var text = "";
        if (obj) {
          text = obj.label;
        }
        return text;
      }
    },
    parseContainerCategory(value) {
      if (value != null) {
        var obj = ContainerType.find((p) => p.value === `${value}`);
        var text = "";
        if (obj) {
          text = obj.label;
        }
        return text;
      }
    },

  },
  mixins: [pageMixin],
  data() {
    return {
      isEdits: false,
      id: "",
      form: {
        id: "",
        transportPlanId: "",
        transferPlanNumber: "",
        startProposedTransferTime: "",
        endProposedTransferTime: "",
        transportTime: [],
      },
      number: 0,
      wastWeight: 0,
      carList: [],

    };
  },
  async created() {
    // 接参页面
    // 对接钩子参数
    const {
      id,
      isEdit
    } = this.$route.params;
    if (isEdit === "true") {
      this.isEdits = true;
    } else {
      this.isEdits = false;
    }

    this.id = id;
    await this.init();
  },
  methods: {
    async init() {
      var searchData = {
        limit: this.pageSize,
        page: this.currentPage,
        searchParam: JSON.stringify({
          TransferApplyId: this.id
        })
      }

      this.loading = true;
      this.tableData = [];

      // 并行获取数据
      Promise.all([await getTransportApplyInfoById(this.id), await getApplyWastList(searchData)])
        .then((result) => {
          this.form = result[0].data;
          var obj = CarType.find((p) => p.value === `${this.form.vehicleModel}`);
          if (obj) { this.form.vehicleModel_text = obj.label; }

          this.tableData = result[1].data;
          this.total = result[1].count;
          this.number = this.tableData.length;
          this.addWasteWeight();
          this.loading = false;
          // 设置时间
          if (!this.form.startProposedTransferTime) {
            this.form.transportTime = [];
          } else {
            this.form.transportTime = parseStartAndEndTimeList(this.form.startProposedTransferTime, this.form
              .endProposedTransferTime);
          }
        })
        .then(async() => {
          const {
            data
            // count
          } = await getList(this.form.tcId, {
            pageSize: this.pageSize,
            currentPage: this.currentPage,
            // name: this.formInline.name,
            // plateNumber: this.formInline.number,
            // status: this.formInline.status,
          });

          this.carList = data;
        })
    },

    async handleCurrentChange() {
      await this.init();
    },

    addWasteWeight() {
      this.wastWeight = 0;
      this.tableData.forEach(item => {
        if (item.hazardousWasteIds) {
          item.wastCount = item.hazardousWasteIds.length
        }
        if (item.wastWeight < 0) {
          item.wastWeight = 0
        }
        this.wastWeight += getFloat(item.wastWeight, 5)
      })
      this.wastWeight = getFloat(this.wastWeight, 5)
    },
    selectedCar(val) {
      var obj = this.carList.find((p) => p.id === val);
      if (obj) {
        this.form.vehicleModel_text = CarType.find((p) => p.value === `${obj.vehicleModel}`).label;
        this.form.vehicleName = obj.name;
        this.form.vehiclePlateNumber = obj.plateNumber;
       
        this.form.vehicleModel = obj.vehicleModel;
      } else {
        this.form.vehicleModel_text = "";
        this.form.vehicleName = "";
        this.form.vehiclePlateNumber = "";
        this.form.vehicleModel = "";
      
      }
    },
    destribut() {
      if (!this.form.vehicleId) {
        this.$message({
          message: '请选择承运车辆',
          type: 'warning'
        });
        return;
      }

      this.$confirm(`车辆：${this.form.vehiclePlateNumber} 即将承运此次转运任务, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async() => {
        var formdata = {
          Id: this.id,
          Type: "20",
          VehicleId: this.form.vehicleId,
          "VehicleName": this.form.vehicleName,
          "VehiclePlateNumber": this.form.vehiclePlateNumber,
         
          "VehicleModel": this.form.vehicleModel

        };
          // 操作数据
        await destributeTransportApply(formdata);

        this.$notify({
          title: "成功",
          message: `转运任务派发成功`,
          type: "success",
          duration: 3000,
        });
        this.$router.push("/wastereceipt/transformApplyDistribution");
      })
    },
    cancel() {
      this.$router.push("/wastereceipt/transformApplyDistribution");
    },
  },
};
</script>
